<!--分页-->
<template>
  <div class="base-pagination">
    <p class="pagination-total">共{{ total }}条记录</p>
    <p v-if="showSelected" class="pagination-total m-l-30">
      已选择{{ selected }}条记录
    </p>
    <el-pagination

      background
      layout="sizes,prev, pager, next, jumper"
      prev-text="上一页"
      next-text="下一页"
      :page-size="pageSize"
      :total="total"
      :current-page="currentPage"
      @current-change="currentChange"
      @size-change="sizeChange"
    />
  </div>
</template>

<script>
export default {
  name: "BasePagination",
  props: {
    total: {
      type: Number,
      default: 0,
    },
    showSelected: {
      type: Boolean,
      default: false,
    },
    selected: {
      type: Number,
      default: 0,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
  },
  methods: {
    // 改变页码
    currentChange(page) {
      this.$emit("changePage", page);
    },
    // 改变每页显示条数
    sizeChange(val) {
      this.$emit("sizeChange", val);
    },
  },
};
</script>

<style lang="scss">
.main-container {
  height: 50px;
}
.base-pagination {
  //   position: absolute;
  //   left: 0;
  //   bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  box-shadow: 0 4px 10px 4px #e4e7f0;
  background-color: #fff;
  z-index: 200;

  .pagination-total {
    flex-shrink: 0;
    font-size: 12px;
    color: #656b7c;
  }
  .el-pagination,
  .is-background {
    height: 50px;
    line-height: initial;
    padding: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    .el-pager {
      li:not(.disabled).active {
        background-color: #4787ff;
      }
    }
    .el-pagination__jump {
      .el-input {
        margin: 0 9px;
        input {
          background-color: #f2f4f9;
        }
      }
    }
    .btn-prev {
      padding: 0 12px;
    }
    .btn-next {
      padding: 0 12px;
    }
  }
}
</style>
